<template>
    <div class="main">
        <div class="m-lf">
            <div class="l-tp">
                <span>Whatsapp</span>
                <span class="icon"><el-icon>
                        <Fold />
                    </el-icon></span>
            </div>
            <div class="l-free">
                <el-button type="success">免费版</el-button>
            </div>
            <div class="l-add">
                <el-button type="primary">+添加会话</el-button>
            </div>
            <div class="session-box" v-for="(item, index) in num" :key="index">
                <Session></Session>
            </div>
        </div>
        <div class="m-ct">
            <el-empty description="未添加会话" />
        </div>
        <div class="m-rg">
            <div class="setup-box">
                <h5 class="title">代理设置</h5>
                <div class="r-setup">
                    <Setup />
                    <el-form :label-position="labelPosition" label-width="50px" :model="formLabelAlign"
                        style="max-width: 460px">
                        <el-form-item label="协议">
                            <el-input v-model="formLabelAlign.name" />
                        </el-form-item>
                        <el-form-item label="主机">
                            <el-input v-model="formLabelAlign.region" />
                        </el-form-item>
                        <el-form-item label="端口">
                            <el-input v-model="formLabelAlign.type" />
                        </el-form-item>
                    </el-form>
                    <Setup />
                    <el-form :label-position="labelPosition" label-width="55px" :model="formLabelAlign"
                        style="max-width: 460px">
                        <el-form-item label="用户名">
                            <el-input v-model="formLabelAlign.name" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="formLabelAlign.region" />
                        </el-form-item>
                    </el-form>
                    <el-button type="info" plain>检测代理</el-button>
                </div>
            </div>
            <div class="m-aside">
                <ul>
                    <li v-for="(item, index) in iconData" :key="index">
                        {{ item.icon }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElButton, ElEmpty, ElForm, ElFormItem, ElInput } from 'element-plus'
import Session from "../components/Session.vue"
import Setup from "../components/Setup.vue"
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
    name: '-',
    region: '-',
    type: '-',
})
let num: any = ref<number>(5)
let iconData: any = ref<Array<any>>([
    {
        icon: "图标1"
    },
    {
        icon: "图标2"
    }, {
        icon: "图标3"
    }, {
        icon: "图标4"
    },
])
</script>

<style scoped lang="scss">
.main {
    height: 100vh;
    display: flex;
    justify-content: space-between;

    .el-button {
        width: 200px !important;
    }

    .l-free {
        margin: 10px 0;
    }

    .m-lf {
        border-right: 1px solid #f1f1f1;
        padding: 5px;
        width: 200px;

        .session-box {
            margin-top: 10px;
        }

        .l-tp {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
                width: 20px;
                height: 20px;
                background: #ddd;
                display: inline-block;
                margin-left: 20px;
            }
        }
    }

    .m-ct {
        display: flex;
        align-items: center;
    }

    .m-rg {
        padding: 10px;
        width: 350px;
        border-left: 1px solid #f1f1f1;
        display: flex;

        .title {
            text-align: left;
        }

        .m-aside {
            height: 100%;

            ul {
                list-style: none;

                li {
                    width: 80px;
                    height: 40px;
                    background: #ddd;
                    line-height: 40px;
                    text-align: center;
                }

            }
        }
    }
}</style>